<script>
// 导入reactive函数
import { reactive } from 'vue';
export default {
  // 定义 setup 函数
  setup() {
    // 使用 reactive 定义响应式数据
    const obj = reactive({ age: 18, name: 'Rose' });
    // 修改数据的函数
    const changeObj = () => {
      obj.age = obj.age + 2;
      obj.name = obj.name + '变';
    };

    // 返回数据和函数给到 vue 框架
    return { obj, changeObj };
  },
};
</script>
<template>
  <div>
    <!-- template 中使用响应式数据，注意和 script 中对比 -->
    <h1>{{ obj.name }}</h1>
    <h1>{{ obj.age }}</h1>
    <button @click="changeObj">改obj</button>
  </div>
</template>
